<template>
  <div class="style of-h">
    <div class="style-bg"></div>
    <div class="screen">
      <img class="image" :src="styleImg" alt="">
    </div>
    <div class="bottom box box-ver box-ac box-jc animated fadeInUp">
      <div class="content box of-x-s">
        <div class="list box">
          <div @click="changeStyle(item)" v-for="(item, index) in filters" :value="item" :key="index" :style="{'background-image': 'url('+item.icon+')'}" class="item icon">
            <!-- <div class="name">{{item.name}}</div> -->
          </div>
        </div>
      </div>
      <div class="tools box box-ac w-p100">
        <img @click="$router.go(-1)" class="close" :src="require('../assets/images/close.png')" alt="">
        <div class="box-f1"></div>
        <img :src="require('../assets/images/style-title.png')" alt="">
        <div class="box-f1"></div>
        <img @click="next()" class="check" :src="require('../assets/images/check.png')" alt="">
      </div>
    </div>
    <cloud></cloud>
  </div>
</template>

<script>
import imageCropper from '@/components/imageCropper'
import cloud from '@/components/cloud'
import { filters } from '@/assets/js/constants'
import { mapState } from 'vuex'
export default {
  name: 'edit',
  components: {
    cloud,
    imageCropper
  },
  computed: {
    ...mapState(['cropperBase64'])
  },
  data () {
    return {
      styleImg: '',
      filters
    }
  },
  mounted () {
    this.styleImg = this.cropperBase64
    this.$store.commit('styleBase64', this.cropperBase64)
  },
  methods: {
    next () {
      this.$router.push({
        path: '/sticker'
      })
    },
    changeStyle (item) {
      this.$http({
        url: `${this.$config.baseUrl}/api/api?ifname=qq.imgfilter.ptu`,
        method: 'post',
        data: {
          // face_url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534488788735&di=20ab9c02eea092cdaeb5f7e291ec2696&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a2e8a46ee23738bd4b31ce586.jpg'
          face_base64: this.cropperBase64.replace(/^data:image\/\w+;base64,/, ''),
          filter: item.code
        }
      }).then(res => {
        if (+res.status === 1) {
          let styleImg = `data:image/png;base64,${res.data.image}`
          this.styleImg = styleImg
          this.$store.commit('styleBase64', styleImg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/color.scss';
@import '../assets/css/mixins.scss';
.screen{
  position:absolute;
  z-index:1;
  bottom:2.5rem;
  left:50%;
  transform: translateX(-50%);
  width:4rem;
  height:8.31rem;
  border:.1rem solid #FFF;
  img{
    width:100%;
    height:100%;
  }
}
.bottom{
  position:absolute;
  bottom:0;
  left:2%;
  width:96%;
  height:2.4rem;
  background-color:rgba(255,255,255,.6);
  border-top-left-radius: .2rem;
  border-top-right-radius: .2rem;
}
.content{
  margin-top:.1rem;
  width:92%;
  // border:1px solid red;
  .list{
    height:100%;
    // width:20rem;
    .item{
      position:relative;
      width:1.2rem;
      height:1.2rem;
      margin-right:.3rem;
      // border:1px solid red;
      // .name{
      //   position: absolute;
      //   bottom:0;
      //   width:100%;
      //   height:.3rem;
      //   line-height:.3rem;
      //   font-size:.24rem;
      //   text-align: center;
      //   color:#FFF;
      //   background-color:rgba(0,0,0,.5);
      // }
    }
  }
}
.tools{
  height:.88rem;
  .close{
    margin-left:.3rem;
  }
  .check{
    margin-right:.3rem;
  }
  img{
    height:.54rem;
  }
}
</style>
